/*
 * @Author: xiaosihan 
 * @Date: 2023-07-19 21:05:52 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-04-17 19:15:13
 */


import MockupMesh from "./MockupMesh/MockupMesh";
import mockupRenderer from "@/myFabric/mockupRenderer";
import { componentKeyNames } from "@/pages/product/componentNames";
import { useEffect, useRef } from "react";
import { DoubleSide, FrontSide, Mesh, MeshBasicMaterial, MeshStandardMaterial, SRGBColorSpace } from "three";
import threeUtils from "three-base/threeUtils";
import styles from "./mockup.module.less";

interface Iprops {
  mockup_url: string
}

// 上身效果展示组件
export default function Mockup(props: Iprops) {

  const canvasDom = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {

    if (props.mockup_url) {
      // 先清理画布
      if (canvasDom.current) {
        const ctx = canvasDom.current.getContext("2d")!;
        ctx.clearRect(0, 0, 100, 100);
      }
      const mockupMesh = new MockupMesh(props.mockup_url);
      mockupMesh.addEventListener("loaded", async () => {
        threeUtils.scaleTo(mockupMesh, 10, ["x", "y"]);
        threeUtils.center(mockupMesh);

        const backMeshs: Array<Mesh> = [];
        false &&
          await mockupMesh.traverseMesh(mesh => {
            // 2d 上身效果模型原本有贴图的 都设置成基础材质
            if ((mesh.material as MeshStandardMaterial).map) {
              (mesh.material as MeshStandardMaterial).map!.colorSpace = SRGBColorSpace;
              mesh.material = new MeshBasicMaterial({
                transparent: mesh.material.transparent,
                opacity: mesh.material.opacity,
                alphaTest: mesh.material.alphaTest,
                color: (mesh.material as MeshStandardMaterial).color,
                side: DoubleSide,
                map: (mesh.material as MeshStandardMaterial).map
              });
            } else {
              mesh.material = new MeshStandardMaterial({
                normalMap: (mesh.material as MeshStandardMaterial).normalMap,
                transparent: mesh.material.transparent,
                opacity: mesh.material.opacity,
                alphaTest: mesh.material.alphaTest,
                color: (mesh.material as MeshStandardMaterial).color,
                metalness: 0,
                roughness: 0.8,
                side: FrontSide
              });

              // 合法命名复制一个背面
              if (componentKeyNames.some(sort => sort.key === mesh.name)) {
                const backMesh = mesh.clone();
                backMesh.material = backMesh.material.clone();
                backMesh.material.side = FrontSide;
                (backMesh.material as MeshStandardMaterial).map = null;
                backMeshs.push(backMesh);
              }
            }

          });

        backMeshs.map(o => {
          mockupMesh.add(o);
        });

        if (canvasDom.current) {
          mockupRenderer.renderModalToCanvas(mockupMesh, canvasDom.current);
        }
      });
    }

  }, [props.mockup_url]);


  return (
    <div className={styles.mockup} >
      <canvas ref={canvasDom} width={100} height={100} />
    </div>
  );

}